// 添加商品的总布局
import React            from 'react';
import MUtil            from 'util/mm.jsx';
import Product          from 'service/product-service.jsx';
import PageTitle        from 'component/page-title/index.jsx';
import CategorySelector from './category-selector.jsx';
import FileUploader     from 'util/file-uploader/index.jsx';
import RichEditor       from 'util/rich-editor/index.jsx';

import './save.scss';

const __mm      = new MUtil();
const __product = new Product();

class ProductSave extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      id                : this.props.match.params.pid,
      name              : '',
      subtitle          : '',
      categoryId        : 0,
      paraentCategoryId : 0,
      subImages         : [],
      price             : '',
      stock             : '',
      detail            : '',
      status            : 1  // 商品状态1为在售
    }
  }

  componentDidMount(){
    this.loadProduct();
  }

  // 如果有这个 id 那就是编辑，如果没有,那就是添加,不做处理
  loadProduct(){
    // 有id的时候，表示是编辑功能，需要表单回填
    if(this.state.id){
      __product.getProduct(this.state.id).then((res) => {
        // console.log(res)
        // split() 字符串 -> 数组
        let images = res.subImages.split(',');
        res.subImages = images.map((imgUri) => {
          return {
            uri : imgUri,
            url : res.imageHost + imgUri
          }
        });
        res.defaultDetail = res.detail;
        this.setState(res);
      }, (errMsg) => {
        __mm.errTips(errMsg);
      });
    }
  }

  // 这是简单字段的改变,比如商品名称，描述，价格，库存
  onValueChange(e){
    let name  = e.target.name,
        value = e.target.value.trim();
    this.setState({
      [name] : value
    })
  }

  // 品类选择器的变化
  // 父组件 接收到 子组件传过来的 一级品类，二级品类
  onCategoryChange(categoryId, parentCategoryId){
    // console.log(categoryId, parentCategoryId);
    this.setState({
      categoryId        : categoryId,
      parentCategoryId  : parentCategoryId
    })
  }

  // 上传图片成功
  // 下面这样会写有问题，push 返回的是一个数组长度，不是该数组
  // subImages : this.state.subImages.push(res)
  onUploadSuccess(res){
    // console.log('成功',res);
    let subImages = this.state.subImages;
    subImages.push(res);
    this.setState({
      subImages : subImages
    })
  }

  // 上传图片失败
  onUploadError(errMsg){
    // console.log('失败', error);
    __mm.errorTips(errMsg)
  }

  // 删除图片
  onImageDelete(e){
    let index     = parseInt(e.target.getAttribute('index')),
        subImages = this.state.subImages;
    subImages.splice(index, 1);
    this.setState({
      subImages : subImages
    })
  }

  // 富文本编辑器的变化 
  onDetailValueChange(value){
    // console.log(value)
    this.setState({
      detail : value
    })
  }

  // 图片中接收到的 uri 的处理
  getSubImagesString(){
    return this.state.subImages.map((image) => image.uri).join(',');
  }

  // 提交表单（提交按钮）
  onSubmit(){
    let product = {
      name              : this.state.name,
      subtitle          : this.state.subtitle,
      categoryId        : parseInt(this.state.categoryId),
      subImages         : this.getSubImagesString(),
      // paraentCategoryId : this.state.paraentCategoryId,
      price             : parseFloat(this.state.price),
      stock             : parseInt(this.state.stock),
      detail            : this.state.detail,
      status            : this.state.status 
    },
    productCheckResult = __product.checkProduct(product); // 做表单的验证
    // 添加 id，这样可以区分是 编辑的 还是 新添加的
    if(this.state.id){
      product.id = this.state.id;
    }
    // console.log(product);
    // 这是表单验证成功
    if(productCheckResult.status){
      __product.saveProduct(product).then((res) => {
        // 如果保存成功的话，就会告诉我们一下，并把我们的页面跳转到 商品列表上去
        __mm.successTips(res);
        this.props.history.push('/product/index');
      }, (errMsg) => {
        __mm.errorTips(errMsg);
      })
    }
    // 这是表单验证失败
    else{
      __mm.errorTips(productCheckResult.msg);
    }
  }

  render(){
    return (
      <div id="page-wrapper">
        <PageTitle title={this.state.id ? '编辑商品' : '添加商品'} />
        <div className="form-horizontal">
          <div className="form-group">
            <label className="col-md-2 control-label">商品名称</label>
            <div className="col-md-5">
              <input
                type="text"
                className="form-control"
                placeholder="请输入商品名称"
                value={this.state.name}
                name="name"
                onChange={(e) => this.onValueChange(e)}
              />
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品描述</label>
            <div className="col-md-5">
              <input
                type="text"
                className="form-control"
                placeholder="请输入商品描述"
                value={this.state.subtitle}
                name="subtitle"
                onChange={(e) => this.onValueChange(e)}
              />
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">所属分类</label>
            <CategorySelector
              categoryId={this.state.categoryId}
              parentCategoryId={this.state.parentCategoryId}
              onCategoryChange={
                (categoryId, parentCategoryId) => this.onCategoryChange(categoryId, parentCategoryId)
              }
            />
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品价格</label>
            <div className="col-md-3">
              <div className="input-group">
                <input
                  type="number"
                  className="form-control"
                  placeholder="价格"
                  value={this.state.price}
                  name="price"
                  onChange={(e) => this.onValueChange(e)}
                />
                <span className="input-group-addon" id="basic-addon2">元</span>
              </div>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品库存</label>
            <div className="col-md-3">
              <div className="input-group">
                <input
                  type="number"
                  className="form-control"
                  placeholder="库存"
                  value={this.state.stock}
                  name="stock"
                  onChange={(e) => this.onValueChange(e)}
                />
                <span className="input-group-addon" id="basic-addon2">件</span>
              </div>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品图片</label>
            <div className="col-md-10">
              {
                this.state.subImages.length ? this.state.subImages.map(
                  (image, index) => (
                    <div className="img-con" key={index}>
                      <img src={image.url} className="img"/>
                      <i className="fa fa-close" index={index} onClick={(e) => this.onImageDelete(e)}></i>
                    </div>)
                ): (<div>请上传图片</div>)
              }
            </div>
            <div className="col-md-offset-2 col-md-10 file-upload-cn">
              <FileUploader
                onSuccess={(res) => this.onUploadSuccess(res)}
                onError={(errMsg) => this.onUploadError(errMsg)}
              />
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品详情</label>
            <div className="col-md-10">
              <RichEditor
                detail={this.state.detail}
                defaultDetail={this.state.defaultDetail}
                onValueChange={(value) => this.onDetailValueChange(value)}/>
            </div>
          </div>
          <div className="form-group">
            <div className="col-md-offset-2 col-md-10">
              <button
                type="submit"
                className="btn btn-primary"
                onClick={(e) => {this.onSubmit(e)}}
              >
                提交
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default ProductSave;
